<html>
  <head>
    <script src="/js/spritejs.js"></script>
    <!-- <script src="https://s3.ssl.qhres.com/!45070e34/spritejs.min.js"></script> -->
    <style>
      body {
        margin: 0;
        overflow: hidden;
        width: 100%;
        height: 100%;
      }
      .container {
        width: 100%;
        height: 100%;
      }
      .container canvas {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div class="container" id="container"></div>
    <script>
      const {Scene, Sprite, Group, Cloud} = spritejs;
      const [width, height] = [window.innerWidth, window.innerHeight];
      const container = document.getElementById('container');
      const scene = new Scene({
        container,
        width,
        height,
        bufferSize: 6000,
      });
      const layer = scene.layer({
        handleEvent: false,
      });

      // const pos = [Math.random() * width, Math.random() * height];

      const s = new Sprite({
        bgcolor: '#f00',
        borderRadius: 50,
        size: [100, 100],
        anchor: [0.5, 0.5],
        gradients: {
          bgcolor: {
            vector: [50, 50, 0, 50, 50, 50],
            colors: [
              {
                offset: 0,
                color: 'rgba(255, 0, 0, 0.1)',
              }, {
                offset: 1,
                color: 'rgba(255, 0, 0, 8)',
              },
            ],
          },
        },
      });

      const s2 = new Sprite({
        // bgcolor: '#f00',
        borderRadius: 10,
        size: [20, 20],
        anchor: [0.5, 0.5],
        bgcolor: 'rgba(255, 0, 0, 8)',
      });

      const amount = 1000;
      const c1 = new Cloud(s, amount);
      const c2 = new Cloud(s2, amount);
      layer.append(c1, c2);

      const timers = [];
      const poses = [];
      for(let i = 0; i < c1.amount; i++) {
        const pos = [Math.random() * width, Math.random() * height];
        c1.setTransform(i, null);
        c1.translate(i, pos);
        c2.setTransform(i, null);
        c2.translate(i, pos);
        timers.push(Math.random());
        poses.push(pos);
      }
      
      function render() {
        for(let i = 0; i < c1.amount; i++) {
          const pos = poses[i];
          timers[i] += 0.02;
          const scale = timers[i] % 1;
          c1.setTransform(i, null);
          c1.setColorTransform(i, null);
          c1.translate(i, pos);
          c1.scale(i, [scale, scale], pos);
          c1.opacity(i, 1 - scale);
        }
        requestAnimationFrame(render);
      }
      render();

      window.addEventListener('resize', () => {
        scene.setResolution(window.innerWidth, window.innerHeight);
      });
    </script>
  </body>

</html>